<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" v-show="!item.checked">
        <input type="checkbox" v-model="item.checked" @click="check(item)" />
        <span>{{ item.value }}</span>
        <p @click="del(item)">X</p>
      </li>
    </ul>
    <hr />
    <ul>
      <li :class="item.checked?'active':''" v-for="(item, index) in list" :key="index" v-show="item.checked">
        <input type="checkbox" v-model="item.checked" @click="check(item)" />
        <span>{{ item.value }}</span>
        <p @click="del(item)">X</p>
      </li>
    </ul>
    <footer>
      <input type="checkbox" v-model="allischeck" />
      <div>{{ $store.getters.tjnum }} item left</div>
      <div class="filters">
        <span>All</span>
        <span>Active</span>
        <span>Completed</span>
      </div>
      <span @click="$store.commit('del1')">Clear completed</span>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: this.$store.state.list,
      show: false,
    };
  },
  computed: {
    //   一个变量要经过计算得到
    allischeck: {
      //  判断数组中的每一项是否全部选中  全部选中为true 只要有一个不选中为false
      get() {
        return this.$store.state.list.every((item) => {
          return item.checked == true;
        });
      },
      //   点击全选 让数组中所有元素的ischeck都为v
      // 调用mutations方法
      set(v) {
        this.$store.commit("ischecked", v);
      },
    },
  },
  methods: {
    del(item) {
      console.log(item);
      this.$store.commit("del", item);
    },
    check(item) {
      this.$store.commit("check", item);
    },
  },
};
</script>

<style scoped lang="scss">
ul {
  margin-top: 10px;
  list-style: none;
  line-height: 10px;
 
}
li {
  padding: 10px;
  display: flex;
  margin-top: 10px;
   &.active {
    background: wheat;
  }
}
li p {
  width: 10px;
}
li span {
  flex: 1;
  margin-left: 10px;
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 100px;
  gap: 20px;
  .filters {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  span:hover {
    color: #fff;
    background-color: #fe7345;
  }
}
</style>